<template>
  <div class="menu-bar-item" :style="{ height: viviHeight }" @click="onClick($event)">
    <i :class="icon" v-show="icon"></i>{{ text }}
  </div>
</template>

<script>
export default {
  name: "MenuBarItem",
  props: {
    text: {
      type: String,
      default: "",
    },
    icon: {
      type: String,
      default: "",
    },
    height: {
      type: [String, Number],
      default: "40px",
    },
    index: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {};
  },
  computed: {
    viviHeight() {
      return typeof this.height === "number" ? `${this.height}px` : this.height;
    },
  },
  methods: {
    onClick(event) {
      this.$emit("click", this.index, this.text, event.target);
    },
  },
};
</script>

<style lang="scss" scoped>
.menu-bar-item {
  text-align: left;
  min-width: 100px;
  width: 85%;
  color: #d8dade;
  border-bottom: solid 0.2px #6f7888;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background-color: #282c34;

  i {
    margin-left: 10%;
    margin-right: 15%;
  }

  &:hover {
    color: #fff;
  }
}
</style>
